import React from 'react'
import NavHeader from '../../components/NavHeader'
import styles from './index.module.css'
import { getCity } from '../../utils/getCity'
import axios from 'axios'
import { Toast } from 'antd-mobile'

const BMapGL = window.BMapGL

export default class Map extends React.Component {
  componentDidMount() {
    this.initMap()
  }

  initMap = async () => {
    const { label, value } = await getCity()

    this.map = new BMapGL.Map("map-container")
    const myGeo = new BMapGL.Geocoder()

    myGeo.getPoint(label, async point => {
      if (!point) {
        return null
      }

      this.map.centerAndZoom(point, 11)
      this.map.addControl(new BMapGL.ScaleControl())
      this.map.addControl(new BMapGL.ZoomControl())

      this.renderOverlays(value)

    }, label)
  }

  renderOverlays = async value => {
    const { data } = await axios.get(`http://127.0.0.1:8080/area/map?id=${value}`)

    if (data.status !== 200) {
      return Toast(data.description)
    }

    const {type, nextZoom} = await this.getTypeAndZoom()

    this.createOverlays(data, type, nextZoom)
  }

  getTypeAndZoom = async () => {
    const zoom = await this.map.getZoom()
    let type, nextZoom
    if(zoom >= 10 && zoom < 12) {
      type = 'circle'
      nextZoom = 13
    } else if(zoom >= 12 && zoom < 14) {
      type = 'circle'
      nextZoom = 15
    } else if(zoom >= 14) {
      type = 'rect'
    }
   
    return {
      type,
      nextZoom
    }
  }

  createOverlays = (data, type, nextZoom) => {
    if(type === 'circle') {
      this.createCircle(data, nextZoom)
    } else {
      this.createRect(data)
    }
  }

  createRect = (data) => {  
    data.body.map(item => {
      const { label, count, value: areaValue, coord: { latitude, longitude } } = item

      const opts = {
        position: new BMapGL.Point(longitude, latitude),
        offset: new BMapGL.Size(-30, -30)
      }
      const labelVal = new BMapGL.Label('HELLO', opts)
      labelVal.setContent(`<div class="${styles.houseCount}">
        <span class="${styles.housetitle}">${label}</span>
        <span>${count}套</span>
      </div>`)
      labelVal.setStyle({
        border: 'none',
        backgroundColor: 'transparent'
      })

      this.map.addOverlay(labelVal)

    })
  }

  createCircle = (data, nextZoom) => {  
    data.body.map(item => {
      const { label, count, value: areaValue, coord: { latitude, longitude } } = item

      const opts = {
        position: new BMapGL.Point(longitude, latitude),
        offset: new BMapGL.Size(-30, -30)
      }
      const labelVal = new BMapGL.Label('HELLO', opts);
      labelVal.setContent(`<div class="${styles.bubble}">
        <p class="${styles.name}">${label}</p>
        <p>${count}套</p>
      </div>`)
      labelVal.setStyle({
        border: 'none',
        backgroundColor: 'transparent'
      })

      this.map.addOverlay(labelVal)

      labelVal.addEventListener('click',  () => {
        this.map.clearOverlays()
        this.map.centerAndZoom(new BMapGL.Point(longitude, latitude), nextZoom)

        this.renderOverlays(areaValue)
      })

    })
  }

  render() {
    return (
      <div className={styles['map-box']}>
        <div className={styles.header}>
          <NavHeader>地图找房</NavHeader>
        </div>


        <div id='map-container' className={styles['map-container']}></div>
      </div>
    )
  }
}
